<template>
  <MyModal ref="myModal" title="确定要删除机器人吗？" :top="25">
    <template #content>
      <div style="display: grid; place-items: center">
        <a-alert
          message="Warning"
          description="删除机器人是一个非常危险的操作，为了您的数据安全，请确认无误后删除！！"
          type="warning"
          show-icon
          style="margin-bottom: 10px"
        />

        <a-form ref="formRef" :model="formState" :label-col="labelCol" style="width: 360px">
          <a-form-item required has-feedback name="wechatId" label="微信ID" help="请输入：微信ID">
            <a-input
              v-model:value="formState.wechatId"
              placeholder="微信ID"
              autocomplete="off"
            ></a-input>
          </a-form-item>

          <a-form-item
            required
            has-feedback
            name="desc"
            label="确认信息"
            help="请输入：“我已知悉此操作会将机器人授权时间、余额以及用户数据全部清除且不可恢复”"
          >
            <a-textarea
              v-model:value="formState.desc"
              placeholder="我已知悉此操作会将机器人授权时间、余额以及用户数据全部清除且不可恢复"
              autocomplete="off"
            ></a-textarea>
          </a-form-item>

          <br />

          <a-form-item style="text-align: center">
            <a-button type="primary" style="border-radius: 6px;" danger block @click="handleSubmit">确定删除</a-button>
          </a-form-item>
        </a-form>
      </div>
    </template>
  </MyModal>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import * as accountApi from '@/api/account'
import { message } from 'ant-design-vue'

const myModal = ref()

const recordId = ref<string>()
const showModal = (id: string) => {
  recordId.value = id
  myModal.value?.showModal()
}

const emit = defineEmits<{
  refresh: []
}>()

defineExpose({
  showModal,
})

let labelCol = { span: 5 }

const formRef = ref()
interface formState {
  wechatId: string
  desc: string
}
const formState = ref<formState>({
  wechatId: '',
  desc: '',
})

const handleSubmit = async () => {
  formRef.value.validate().then(async () => {
    // console.log('formState=', formState.value)

    if (formState.value.wechatId && formState.value.desc) {
      try {
        let { state, message: msg } = await accountApi.deleteById({
          id: formState.value.wechatId,
        })
        if (state === 200) {
          message.success('删除成功~')
          myModal.value?.cancelModal()
          emit('refresh')
        } else {
          message.error(msg)
        }
      } catch (error) {
        message.error('网络请求连接失败~')
      }
    }
  })
}
</script>
